<template>
  <div class="bgc-white" style="display: flex">
    <div class="p16" style="width: 260px; flex-shrink: 0">
      <div class="flex-center-between">
        <span class="fs16 fw500">政策分类</span>
        <span style="display: inline-block; cursor: pointer" @click="onAddGroupItem">
          <a-icon type="plus" />
        </span>
      </div>
      <div class="mt12">
        <a-input-search v-model="groupTerm" placeholder="搜索分类" style="width: 228px" allowClear />
      </div>
      <div class="mt16">
        <!-- <div class="pv8 ph12 pointer" :class="{ selected: currentGroup === '0' }" @click="currentGroup = '0'">全部分类</div> -->
        <Draggable v-if="groupLst.length > 0" v-model="groupLst" group="sjgk" animation="300" filter=".undraggable" @end="onDragEnd">
          <template v-for="node in groupLst">
            <div
              v-if="node.name.includes(groupTerm)"
              :key="node.id"
              class="flex-center pv8 ph12 pointer"
              :class="{ selected: currentGroup.id === node.id }"
              @click="onGroupClick(node)"
            >
              <div class="ellipsis" style="width: 170px">{{ node.name }}</div>
              <a-icon type="setting" @click.stop="onEditGroupItem(node)" />
              <a-icon class="ml4 move" type="drag" />
            </div>
          </template>
        </Draggable>
      </div>
    </div>
    <div class="pl16" style="flex: 1; border-left: 1px solid #e8e8e8; overflow: auto; min-height: calc(100vh - 112px)">
      <ItemList v-if="groupLst.length > 0" :currentGroup="currentGroup" />
      <div v-else class="flex-center-center" style="height: 100%">
        <a-empty :image="emptyImg">
          <template slot="description">
            <div class="mb12" style="color: rgba(159, 163, 176, 1)">抱歉，暂无产品数据</div>
            <a-button type="primary" @click="onAddGroupItem">添加分类</a-button>
          </template>
        </a-empty>
      </div>
    </div>
    <a-modal v-model="groupModalVisible" :title="groupModalTitle">
      <a-form :form="groupForm">
        <a-form-item label="分类名称" :labelCol="{ span: 7 }" :wrapperCol="{ span: 14 }">
          <a-input
            v-decorator="['name', { rules: [{ required: true, message: '必须填写名称' }] }]"
            placeholder="请输入"
            style="width: 100%"
          />
        </a-form-item>
      </a-form>
      <a-space slot="footer">
        <a-button @click="groupModalVisible = false">取消</a-button>
        <a-button v-if="groupModalTitle === '编辑分类'" type="danger" @click="onDelGroupItem">删除</a-button>
        <a-button :loading="confirmLoadingGroup" type="primary" @click="onGroupModalOk">提交</a-button>
      </a-space>
    </a-modal>
  </div>
</template>
<script>
import ItemList from "./list.vue";
import Draggable from "vuedraggable";
export default {
  name: "",
  components: { ItemList, Draggable },
  mixins: [],
  props: {},
  data() {
    return {
      groupModalTitle: "添加分组",
      groupModalVisible: false,
      groupForm: this.$form.createForm(this),
      groupLst: [],
      tempGroup: null,
      confirmLoadingGroup: false,
      groupTerm: "",
      currentGroup: null,
      emptyImg: require("../../admin/chanpinjieshao/empty.png")
    };
  },
  computed: {},
  watch: {},
  created() {
    this.onGroupSearchChange();
  },
  mounted() {},
  methods: {
    onDragEnd() {
      this.$request({
        url: `/hr/api/v1/policyCourierTypes/updateSort`,
        method: "put",
        data: this.groupLst.map((item, idx) => ({ id: item.id, sort: idx }))
      });
    },
    onGroupClick(item) {
      this.currentGroup = item;
      localStorage.setItem("tempTypeCode", item.code);
    },
    onGroupSearchChange() {
      this.$request({
        url: `/hr/api/v1/policyCourierTypes/listAll`
      })
        .then((res) => {
          this.groupLst = res.data;
          const tempTc = this.currentGroup ? this.currentGroup.code : localStorage.getItem("tempTypeCode");
          const idx = res.data.findIndex((item) => item.code === tempTc);
          if (idx > -1) {
            if (this.groupLst.length > 0) {
              this.currentGroup = this.groupLst[idx];
            } else {
              this.currentGroup = null;
            }
          } else {
            if (this.groupLst.length > 0) {
              this.currentGroup = this.groupLst[0];
            } else {
              this.currentGroup = null;
            }
          }
        })
        .catch((err) => {
          console.log("policyCourierTypes/listAll", err);
        });
    },
    onDelGroupItem() {
      this.$confirm({
        title: "删除确认",
        content: "分类删除后将无法恢复，确认要删除吗？",
        onOk: () => {
          this.$request({
            url: `/hr/api/v1/policyCourierTypes/${this.tempGroup.id}`,
            method: "delete"
          })
            .then(() => {
              this.$message.success("删除成功");
              this.onGroupSearchChange();
              this.groupModalVisible = false;
            })
            .catch((err) => {
              console.log("deleteGroupReq", err);
            });
        }
      });
    },
    onAddGroupItem() {
      this.groupForm.resetFields();
      this.groupModalTitle = "添加分类";
      this.tempGroup = null;
      this.groupModalVisible = true;
    },
    onEditGroupItem(target) {
      this.tempGroup = target;
      this.groupModalTitle = "编辑分类";
      this.groupModalVisible = true;
      setTimeout(() => {
        this.groupForm.setFieldsValue({
          name: target.name
        });
      }, 0);
    },
    onGroupModalOk() {
      this.groupForm.validateFields((err, values) => {
        if (!err) {
          const newValues = {
            name: values.name
          };
          this.confirmLoadingGroup = true;
          if (this.groupModalTitle === "添加分类") {
            this.$request({
              url: "/hr/api/v1/policyCourierTypes",
              method: "post",
              data: newValues
            })
              .then((res) => {
                this.$message.success("添加成功");
                this.onGroupSearchChange();
                this.groupModalVisible = false;
                this.confirmLoadingGroup = false;
              })
              .catch((err) => {
                this.confirmLoadingGroup = false;
                console.log("saveGroupReq", err);
              });
          } else {
            this.$request({
              url: "/hr/api/v1/policyCourierTypes",
              method: "put",
              data: {
                ...newValues,
                id: this.tempGroup.id
              }
            })
              .then((res) => {
                this.$message.success("修改成功");
                this.onGroupSearchChange();
                this.groupModalVisible = false;
                this.confirmLoadingGroup = false;
              })
              .catch((err) => {
                this.confirmLoadingGroup = false;
                console.log("updateGroupReq", err);
              });
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.selected {
  background: var(--primary30);
  border-radius: 4px;
}
</style>
